// src/components/ClaimButton.tsx
import { useState, useEffect } from 'react';
import { useTokenContract } from '../hooks/TokenContractProvider';
import { toast } from 'react-toastify';
export function ClaimButton() {
  const {account, claimStatus, claimTokens, updateClaimStatus } = useTokenContract();
  const [isClaiming, setIsClaiming] = useState(false);
  console.log('ClaimButton account', account);
  console.log('ClaimButton claimStatus', claimStatus);

  const handleClaim = async () => {
    if (!claimStatus?.canClaim) return;
    
    setIsClaiming(true);
    const success = await claimTokens();
    setIsClaiming(false);
    
    if (success) {
      toast.success("Tokens claimed successfully!");
      updateClaimStatus();
    } else {
      toast.error("Failed to claim tokens");
    }
  };
  
  return (
    <div className="claim-section">
      <h2>Claim Tokens</h2>
      {claimStatus ? (
        <>
          <p>Daily claims left: {claimStatus.availableToday}</p>
          <p>Total remaining: {claimStatus.remainingTotal} VST</p>
          <button 
            onClick={handleClaim}
            disabled={!claimStatus.canClaim || isClaiming}
          >
            {isClaiming ? "Processing..." : "Claim 100 VST"}
          </button>
          {!claimStatus.canClaim && (
            <p className="error">You cannot claim tokens at this time</p>
          )}
        </>
      ) : (
        <p>Loading claim status...</p>
      )}
    </div>
  );
}